<template>
	<base-popup
		:modelValue="activityStore.showRewardPopup"
		class="min-h-[80vh]"
		contentClass="overflow-y-hidden"
		@go-back="activityStore.setRewardPopupShow(false)"
		@close="onClose">
		<template #title>
			<p>{{ activityStore.rewardPopupData.name }}</p>
		</template>
		<template v-if="activityStore.rewardPopupData?.type === 'expireBonus'">
			<DetailExpired class="mx-[21px]" />
		</template>

		<div class="mx-[21px]" v-else>
			<p class="px-[38px] text-center text-t-2 font-sm py-4">
				{{ $t(activityStore.rewardPopupData.subtitle) }}
			</p>
			<div
				class="rounded-[10px] pb-2 flex flex-col justify-center text-center items-center overflow-hidden"
				:class="activityStore.rewardPopupData.bgColorPopup">
				<div class="light-box z-10" style="position: relative">
					<div class="wrap-light-image">
						<img
							src="@/assets/img/activity/popup/light.svg"
							alt="light-purple"
							class="light-image"
							v-if="activityStore.rewardPopupData.isLight" />
						<img
							src="@/assets/img/activity/popup/dark-light.svg"
							alt="light-purple"
							class="light-image"
							v-else />
					</div>
					<base-image
						v-if="activityStore.rewardPopupData?.popupIcon"
						:src="activityStore.rewardPopupData.popupIcon"
						class="w-[283px] mt-4 z-20 relative" />
					<base-image
						v-else
						:src="activityStore.rewardPopupData.icon"
						class="w-[283px] mt-4 z-20 relative" />
					<p class="text-white">{{ $t('record.bonusBannerTitle') }}</p>
					<up-amount :value="totalAmount" class="text-warning text-3xl app-font-heavy" />
				</div>
			</div>
			<div class="w-full bg-bg-1 rounded" v-if="activityStore.rewardPopupData.id === 'lockBonus'">
				<record-list-lock-bonus class="pt-8" />
			</div>
			<div class="w-full pt-[30px] bg-bg-1 rounded" v-else>
				<div class="flex justify-between gap-2 items-center mb-3">
					<p>{{ $t('record.recentClaimed') }}</p>
					<date-select :updateTime="updateTime" :selectDay="selectDay" @select="handleSelect" />
				</div>
				<div class="h-[500px]">
					<base-list manual @request-more="setList" ref="listRef">
						<template #item="{ item }">
							<card-item
								:title="$t(tag(item))"
								:type="item.type"
								:amount="item.amount"
								@click="onClickCardItem(item)"
								class="my-2" />
						</template>
					</base-list>
				</div>
			</div>
		</div>
	</base-popup>
</template>
<script lang="ts" setup>
import { useActivityInfo } from '@/hooks/useActivityInfo.ts'
import { useActivityStore } from '@/store'
import { watch, computed } from 'vue'
import { getBonusList } from '@/api/activity.ts'
import { ActivityCashbackKeys, ActivityRebateKeys } from '@/enums/activity-reward-type.ts'
import { UpAmount } from '@/components/up'
import { BaseImage, BasePopup, BaseList } from '@/components/base'
import DateSelect from '@/views/activity/components/rewards/date-select.vue'
import CardItem from '@/views/activity/components/rewards/card-item.vue'
import { RewardsEnumDiff } from '@/enums'
import RecordListLockBonus from './record-list-lock-bonus/index.vue'
import DetailExpired from '@/views/activity/record/detail-expired.vue'

const activityStore: any = useActivityStore()

const _bonusType = computed(
	() => RewardsEnumDiff[activityStore.rewardPopupData?.type] || activityStore.rewardPopupData?.type
)

const { onOpen, selectDay, updateTime, handleSelect, totalAmount, params, listRef, formatList } =
	useActivityInfo()

const setList = async (currentPage: number, finish: void | ((...arg1: any[]) => void)) => {
	try {
		const { data } = await getBonusList({
			...params.value,
			bonusType: _bonusType.value,
			pageSize: 2000,
			page: currentPage
		})
		finish?.(formatList(data.list), data.total)
		totalAmount.value = data.totalAmount
	} catch (err) {
		console.log(err)
	}
}

const tag = (item: any) => {
	if (ActivityRebateKeys.includes(item.type)) {
		return 'record.tagRebate'
	} else if (ActivityCashbackKeys.includes(item.type)) {
		return 'record.tagCashback'
	} else {
		return 'record.tagBonus'
	}
}

const onClickCardItem = (item: any) => {
	activityStore.setRecordParams({ ...params.value, type: [item.type] })
	activityStore.setDetailCardType(item.type)
	activityStore.setRewardDetailPopupShow(true)
}

const onClose = () => {
	activityStore.setRewardPopupShow(false)
}

watch(
	() => activityStore.showRewardPopup,
	async (val: any) => {
		if (val) {
			totalAmount.value = 0
			onOpen()
		}
	},
	{
		immediate: true
	}
)
</script>

<style lang="scss" scoped>
.slots-rebate {
	background: linear-gradient(180deg, #42781e 0%, #255741 30.41%, #2b5547 69.75%, #4a9c33 100%);
}
.casino-rebate {
	background: linear-gradient(180deg, #840c88 0%, #471a5c 29.72%, #3d2755 69.06%, #8f2092 100%);
}
.sports-rebate {
	background: linear-gradient(180deg, #11778e 0%, #174e5f 29.72%, #234c5f 69.06%, #2086a2 100%);
}
.weekly-cashback {
	background: linear-gradient(180deg, #917b0a 0%, #5f5e22 29.72%, #4c5241 69.06%, #84852b 100%);
}
.rebates {
	background: linear-gradient(180deg, #112e8c 0%, #1b1f58 29.72%, #1f2456 69.06%, #2047a5 100%);
}
.rewards-bonus {
	//background: linear-gradient(180deg, #7b240b 0%, #551a1d 30.41%, #412935 69.75%, #68482f 100%);
	//background: linear-gradient(90deg, #ed5f5559, #e553531a);
	background: linear-gradient(
		rgb(123, 36, 11) 0%,
		rgb(85, 26, 29) 30.41%,
		rgb(65, 41, 53) 69.75%,
		rgb(104, 72, 47) 100%
	);
}
.bg-lock-bonus {
	//background: linear-gradient(90deg, #ed5f5559, #e553531a);
	//background: linear-gradient(180deg, #7b240b 0%, #551a1d 30.41%, #412935 69.75%, #68482f 100%);
	background: linear-gradient(
		rgb(123, 36, 11) 0%,
		rgb(85, 26, 29) 30.41%,
		rgb(65, 41, 53) 69.75%,
		rgb(104, 72, 47) 100%
	);
}
.light-box {
	position: relative;
	width: 100%;
	.wrap-light-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		//height: 510px;
		//width: 100vw;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		pointer-events: none;
	}
	.light-image {
		scale: 0.8;
		width: 100%;
		height: 100%;
		animation: auto-rotate 5s linear infinite;
		//margin-bottom: 50px;
	}
	.vip-image {
		margin: auto;
		width: 250px;
		height: 135px;
		position: relative;
		z-index: 1;
	}
}
</style>
